<!-- 商品情况的组件 -->
<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/hemo' }">Home</el-breadcrumb-item>
    <el-breadcrumb-item>商品情况</el-breadcrumb-item>
    <el-breadcrumb-item>商品类别</el-breadcrumb-item>
  </el-breadcrumb>
  <div>
    <el-table :data="allGoods" stripe style="width: 100%">
      <el-table-column prop="productId" label="ID" width="100">
      </el-table-column>
      <el-table-column prop="productName" label="name" width="150">
      </el-table-column>
      <el-table-column prop="salePrice" label="价格" width="100">
      </el-table-column>
      <el-table-column prop="leibie" label="类别" width="100" :filters="[{ text: '品牌周边', value: '品牌周边' },{ text: '官方精选', value: '官方精选' }, { text: '品牌精选', value: '品牌精选' }]" :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.leibie === '官方精选' ? 'primary' : 'success'" disable-transitions>{{scope.row.leibie}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="productImageBig" label="url" width="260">
      </el-table-column>
    </el-table>
    <el-pagination style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[8, 20, 40, 80]" :page-size="size" layout="total,sizes, prev, pager, next" :total="total"></el-pagination>
  </div>
</div>
</template>

<script>
export default {
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      //
      max: '100000',
      min: '1',
      page: 1,
      size: 5,
      sort: 1,
      // 数量
      total: 32,
      // 所有商品数据
      allGoods: []
    }
  },
  created() {
    this.getAllGoods()
  },
  methods: {
    async getAllGoods() {
      try {
        //! !!URL一定要吧反单引号包起来
        const res = await this.$axios.get(`http://47.106.237.228:3001/api/home/allGoods?page=${this.page}&size=${this.size}&sort=${this.sort}&priceGt=${this.min}&priceLte=${this.max}`)
        // console.log(this.page);
        // console.log(res)
        const allGoods = res.data.data
        this.allGoods = allGoods
        // console.log(allGoods)
        const total = res.data.total
        this.total = total
        // console.log(total)
      } catch (error) {
        console.log(error)
      }
    },
    // eslint-disable-next-line space-before-function-paren
    handleSizeChange(val) {
      this.size = val
      this.getAllGoods()
    },
    // eslint-disable-next-line space-before-function-paren
    handleCurrentChange(val) {
      this.page = val
      this.getAllGoods()
    },
    filterTag(value, row) {
      return row.leibie === value
    }
  }
}
</script>

<style lang="less">
.el-table {
  margin-top: 20px;
}
</style>
